<template>
  <view class="container" v-if="result">
    <!-- 店铺信息 -->
    <view class="store-info-box">
      <view class="title-box">
        <text class="title">{{result.store.storeName}}</text>
        <text class="type" :class="'type-' + result.store.storeType">{{result.store.storeType | formatStoreType}}</text>
      </view>
      <view class="address-box">
        <text class="address">{{result.store.storeAddress}}</text>
      </view>
    </view>
    
    <!-- 标题 -->
    <block v-if="myCar">
      <view class="top flex flex-ai-c" @click="onChangeVehicle">
      	<view class="top-main flex">
      		<view class="top-logo">
      			<image style="width:100%;height: 100%;" :src="myCar.brandImg"></image>
      		</view>
      		<view class="top-title">
      			<view>{{myCar.carName}}</view>
      			<view class="pz">{{myCar.carNamePart}}</view>
      		</view>
      		<view class="flex flex-jc-fe" style="flex: 1;margin-right: 20rpx;">
      			<u-icon name="arrow-right" color="#999999" size="30"></u-icon>
      		</view>
      	</view>
      </view>
    </block>
    
    <view v-else class="top flex flex-jc-c flex-dir-c default" style="height: 160rpx;position: relative;">
    	<image src="https://files.yzsheng.com/client/index/carMaintenance/tianjiaqiche.png" style="width: 199rpx;height: 91rpx;position: absolute;bottom: 33rpx;right: 40rpx;"></image>
    	<view style="color: #666666;">添加爱车，提供精准适配服务</view>
    	<view class="add" @click="addConf">添加爱车<u-icon name="arrow-right"></u-icon></view>
    </view>
    
    <!-- 排队类型 -->
    <view class="queue-type-box">
      <view class="title"><text>可选择服务类型（可多选）</text></view>
      <view class="checkbox-box">
        <view class="cell" v-for="(item, index) in result.queueTypes" :key="index" @click="onClickQueueType(index)">
          <view class="left">
            <view class="radio" :class="{active: item.selected}">
              <u-icon name="checkmark" :color="item.selected ? '#333' : '#fff'" size="20"></u-icon>
            </view>
            <text class="span">{{item.name}}</text>
          </view>
          <view class="right">
            <text class="span">当前排队<text class="red">{{item.count}}</text>人</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 服务类型 -->
    <view class="service-type-box">
      <view class="title"><text>可选择服务类型（可多选）</text></view>
      <view class="checkbox-box">
        <view class="cell" v-for="(item, index) in result.services" :key="index" @click="onClickServiceType(index)">
          <view class="left">
            <view class="radio" :class="{active: item.isCheck}">
              <u-icon name="checkmark" :color="item.isCheck ? '#333' : '#fff'" size="20"></u-icon>
            </view>
            <text class="span">{{item.name}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="footer" v-show="selected">
      <view class="btn-box">
        <view class="btn flex flex-ai-c flex-jc-c" @click="onSubmit">
          <text class="text">确定排号</text>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
import {getUrlParam} from '@/utils/common-api.js' 
export default {
  data() {
    return {
      myCar: null, // 我的爱车
      result: null,
      storeId: '', // 店铺id
      specifAll: {
        brandlist: null, //品牌
        Serieslist: null, //系列
        Displacement: null, //排量
        Modelyear: null, //年款
        Configulists: null, //车子
      },
    }
  },
  computed: {
    selected() {
      return this.result.queueTypes.some(item => {
        return item.selected
      })
    },
    userinfo() {
      return this.$store.state.userinfo
    }
  },
  filters: {
    formatStoreType(data){
      let text = ''
      switch(Number(data)) {
        case 1:
        case 6:
          text = '旗舰店'
          break
        case 0:
        case 2:
          text = '体验店'
          break
        case 3:
        case 8:
          text = '中心店'
          break
        case 4:
          text = '加盟店'
          break
        default:
          text = '旗舰店'
          break
      }
      return text
    }
  },
  onLoad(option) {
    let storeId = null;
    if(option.storeId){
      storeId = option.storeId;
    }else{
      let resObj = getUrlParam(decodeURIComponent(option.q));
      storeId = resObj.id;
    }
    let token = uni.getStorageSync('token');
    if(!token){
      uni.setStorageSync('storeId', storeId);
      uni.reLaunch({
        url: '/pages_logins/login/login'
      })
      return;
    }
    if(storeId) {
      this.storeId = storeId
      uni.showLoading({
        title: '加载中'
      })
      if(!this.result) {
        this.getClientQueueInfoBack(storeId)
      }
    }
    uni.$on('changeVehicle', data => {
      this.myCar = data
    })
    
    // 选择品牌，系列，排量，年款，车子
    uni.$on('lineUp', data => {
      Object.assign(this.specifAll, data)
      if (data.licenseplate && data.pageFrom === 'lineUp') {
        this.addCar(this.specifAll)
      }
    })
  },
  methods: {
    // 获取排队信息
    async getClientQueueInfoBack(storeId) {
      try{
        let res = await this.$api.commodity.ClientQueueInfoBack({
          storeid: storeId
        })
        if(res.code === 200){
          res.data.queueTypes.map(item => {
            item.selected = false
          })
          this.result = res.data
          if(res.data.cars.length > 0) {
            this.myCar = res.data.cars[0]
          }
        }
        uni.hideLoading()
      }catch(e){
        uni.hideLoading()
      }
    },
    // 点击选择排队类型
    onClickQueueType(index) {
      let item = this.result.queueTypes[index]
      item.selected = !item.selected
      this.$set(this.result.queueTypes, index, item)
    },
    // 点击选择服务类型
    onClickServiceType(index) {
      let item = this.result.services[index]
      item.isCheck = !item.isCheck
      this.$set(this.result.services, index, item)
    },
    // 点击确认排队
    async onSubmit() {
      if(!this.myCar) {
        uni.showToast({
          icon: 'none',
          title: '请先选择爱车'
        })
        return false
      }
      let params = {
        storeId: this.result.store.storeId,
        carId: this.myCar.carId,
        services: [],
        queueType: []
      }
      this.result.queueTypes.map(item => {
        if(item.selected) {
          params.queueType.push(item.id)
        }
      })
      this.result.services.map(item => {
        if(item.isCheck) {
          params.services.push(item.id)
        }
      })
      if(params.queueType.length <= 0) {
        uni.showToast({
          icon: 'none',
          title: '请选择排队类型'
        })
        return false
      }
      if(params.services.length <= 0) {
        uni.showToast({
          icon: 'none',
          title: '请选择服务类型'
        })
        return false
      }
      uni.showLoading({
        title: '正在排队'
      })
      try{
        let res = await this.$api.commodity.ClientQueue(params)
        uni.hideLoading()
        if(res.code === 200){
          let queue = []
          for(let i in res.data) {
            queue.push({
              name: i,
              value: res.data[i]
            })
          }
          this.$store.commit('queueInfo', {
            store: this.result.store,
            queue: queue
          })
          uni.navigateTo({
            url: '/pages_commodity/lineUp/lineUpSuccess'
          })
        } else {
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
        }
      }catch(e){
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: '排队接口错误'
        })
      }
    },
    // 切换车辆
    onChangeVehicle() {
      uni.navigateTo({
        url: `/pages_commodity/lineUp/changeVehicle?storeId=${this.storeId}`
      })
    },
    addConf() {
      uni.navigateTo({
        url: '/pages_common/addYourCar/addYourCar?type=120&pageFrom=lineUp'
      })
    },
    async getUserInfo(callback) {
      if(this.userinfo) {
        callback && callback(true)
      } else {
        try{
          let res = await this.$api.user.GetUserInfomation()
          if(res.code === 200) {
            this.$store.commit('userinfo', res.data)
            callback && callback(true)
          } else {
            callback && callback(false)
          }
        }catch(e){
          callback && callback(false)
        }
      }
    },
    // 添加爱车
    addCar(data) {
      this.getUserInfo(async () => {
        try{
          uni.showLoading({
            title: '加载中'
          })
          let res = await this.$api.common.AddCar({
            uid: this.userinfo.accountid,
            brand_Id: data.brandlist.bid,
            brand_Name: data.brandlist.brand,
            car_Type_Id: data.Serieslist.carTypeId,
            car_Type_Name: data.Serieslist.carTypeName,
            car_Id: data.Configulist.id,
            car_Name: data.Configulist.name,
            displacement: data.Displacement.pName,
            yeartype: data.Configulist.date,
            car_Num: data.licenseplate, //车牌号
          })
          
          let result = await this.$api.commodity.ClientQueueInfoBack({
            storeid: this.storeId
          })
          if(result.code === 200){
            if(result.data.cars.length > 0) {
              this.myCar = result.data.cars[0]
            }
          }
          uni.hideLoading()
        }catch(e){
          uni.hideLoading()
        }
      })
    }
  },
  onUnload() {
    uni.$off('changeVehicle')
    uni.$off('lineUp')
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.container{
  overflow: hidden;
  // padding-bottom: 200rpx;
  // padding-bottom: calc(constant(safe-area-inset-bottom) + 200rpx);
  // padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
  .store-info-box{
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
    margin: 25rpx 25rpx 0;
    padding: 24rpx;
    .title-box{
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      .title{
        font-size: 30rpx;
        color: #333;
      }
      .type{
        height: 30rpx;
        line-height: 30rpx;
        font-size: 20rpx;
        color: #3F3F3F;
        padding: 0 8rpx;
        margin-left: 24rpx;
        background-image: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 5px;
      }
      .type-1, .type-6{
        background-image: linear-gradient(0deg, #FBD220, #FFE23E);
      }
      .type-2{
        background-image: linear-gradient(180deg, #FFEEC8, #FFAD9A);
      }
      .type-3{
        background-image: linear-gradient(0deg, #FF7590, #FFD39B);
      }
      .type-8{
        background-image: linear-gradient(0deg, #93BCFF, #BEF4FF);
      }
      .type-4{
        background-image: linear-gradient(0deg, #A8D36A, #ECF9C3);
      }
    }
    .address-wrapper{
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #999;
      .address{
        display: block;
        flex: 1;
        margin-right: 88rpx;
        overflow: hidden;
        word-break: break-word;
      }
    }
  }
  .queue-type-box{
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
    margin: 10rpx 25rpx 0;
    padding: 30rpx 24rpx;
    .title{
      font-size: 26rpx;
      color: #3f3f3f;
      font-weight: bold;
    }
    .checkbox-box{
      .cell{
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left, .right{
          display: flex;
          align-items: center;
        }
        .span{
          font-size: 30rpx;
          color: #3f3f3f;
        }
        .red{
          color: #FF4B44;
        }
        .radio{
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          width: 32rpx;
          height: 32rpx;
          border-radius: 32rpx;
          border: 2rpx solid #d0d0d0;
          margin-right: 20rpx;
          &.active{
            background: #FBD220;
            border: none;
          }
        }
      }
    }
  }
  .service-type-box{
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
    margin: 10rpx 25rpx 0;
    padding: 30rpx 24rpx;
    .title{
      font-size: 26rpx;
      color: #3f3f3f;
      font-weight: bold;
    }
    .checkbox-box{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .cell{
        width: 33.3333%;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left, .right{
          display: flex;
          align-items: center;
        }
        .span{
          font-size: 30rpx;
          color: #3f3f3f;
        }
        .red{
          color: #FF4B44;
        }
        .radio{
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          width: 32rpx;
          height: 32rpx;
          border-radius: 32rpx;
          border: 2rpx solid #d0d0d0;
          margin-right: 20rpx;
          &.active{
            background: #FBD220;
            border: none;
          }
        }
      }
    }
  }
  .footer{
    // position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 0;  
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);
    margin: 100rpx 0;
    .btn-box{
      padding: 0 24rpx 60rpx;
      .btn{
        height: 88rpx;
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 44rpx;
        .text{
          font-size: 30rpx;
          color: #3d3d3d;
        }
      }
    }
  }
  .top{
    padding: 35rpx 25rpx;
    margin: 25rpx 25rpx 0;
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.12);
    border-radius: 10rpx;
    .top-main{
    	flex: 1;
    }
    
    .top-title{
    	width: 400rpx;
    	margin-left: 35rpx;
    	font-size: 28rpx;
    	font-weight: 500;
    	color: #666666;
    	
    	.pz{
    		display: -webkit-box;
    		overflow: hidden;
    		white-space: normal !important;
    		text-overflow: ellipsis;
    		word-wrap: break-word;
    		-webkit-line-clamp: 1;
    		-webkit-box-orient: vertical;
    	}
    	view:first-child{
    		font-size: 34rpx;
    		display: -webkit-box;
    		overflow: hidden;
    		white-space: normal !important;
    		text-overflow: ellipsis;
    		word-wrap: break-word;
    		-webkit-line-clamp: 2;
    		-webkit-box-orient: vertical;
    		font-weight: bold;
    		color: #333333;
    	}
    }
    
    
    .maintain{
    	color: #3D3D3D;
    	font-weight: 500;
    	width: 163rpx;
    	height: 54rpx;
    	background: linear-gradient(0deg, #FBD220, #FFE23E);
    	border-radius: 27rpx;
    	text-align: center;
    	line-height: 54rpx;
    }
    .top-logo{
    	margin-left: 25rpx;
    	width: 90rpx;
    	height: 90rpx;
    }
  }
  
  .default{
  	padding: 0 42rpx;
    margin: 25rpx 25rpx 0;
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.12);
    border-radius: 10rpx;
  }
  .add{
  	width: 200rpx;
  	height: 60rpx;
  	background: linear-gradient(0deg, #FBD220, #FFE23E);
  	border-radius: 30px;
  	font-size: 28rpx;
  	font-weight: bold;
  	color: #3D3D3D;
  	text-align: center;
  	line-height: 60rpx;
  	margin-top: 20rpx;
  }
}
</style>
